<template>
  <!-- //选择技术方案分类 -->
  <a-modal title="选择技术方案分类" :visible="visible" class="large-modal" @ok="handleOk" @cancel="$emit('cancel', false)">
    <a-row v-loading="loading">
      <a-col :span="6">
        <div style="height: 500px; border-right: 1px solid rgba(215, 215, 215, 1); padding-right: 10px; width: 100%; overflow: hidden; box-sizing: border-box">
          <a-spin :spinning="loading2" style="height: 100%">
            <a-tree
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :tree-data="gData"
              :selectedKeys.sync="selectedKeys"
              :replaceFields="{ children: 'children', title: 'fileNo', key: 'id' }"
              @expand="onExpand"
              @select="selectTreeNode"
              :style="'maxheight: calc('+GET_REDRESS_PERCENTAGE+'vh - 380px); overflow: auto'"
            >
            </a-tree>
          </a-spin>
        </div>
      </a-col>
      <a-col :span="1" />
      <a-col :span="17">
        <searchData :search-data="searchArr" @search="search" />
        <list-table ref="table" :row-key="(record) => record.id" :columns="columns" :request="loadData" :is-init="false" :pageKeys="['pageNum', 'pageSize', 'total']" :row-selection="rowSelection">
          <template slot="enable" slot-scope="text">
            {{ text ? '可用' : '不可用' }}
          </template>
        </list-table>
      </a-col>
    </a-row>
  </a-modal>
</template>
  <script>
import { getTechnicalProgramTypeById, getPageTechnicalProgramTypeInfo } from '@/api/technology'
import {mapGetters } from 'vuex'
export default {
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    projectQualityTypeId: {
      //工程类别id
      type: String,
      required: ''
    }
  },
  data() {
    return {
      loading: false,
      loading2: false,
      loadingBtn2: false,
      nodeVisible: false,
      visible2: false,
      disabled: false,
      selectedKeys: [],
      selectNode: {},
      form: {
        fileNo: null,
        status: null,
        sort: null
      },
      searchArr: [
        {
          name: '分项名称',
          value: 'partialInfo',
          type: 'input'
        }
      ],
      query: {
        partialInfo: ''
      },
      columns: [
        {
          title: '分项名称',
          dataIndex: 'partialInfo'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'enable' },
          width: 120
        }
      ],
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      gData: [],
      qualityTypes: [],
      selectedRowKeys: [],
      selectionRows: []
    }
  },
  watch: {
    projectQualityTypeId: {
      immediate: true,
      handler(nv, old) {
        if (nv) {
          this.getTechnicalProgramTypeById()
        }
      }
    }
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    rowSelection() {
      return {
        type:'radio',
        selectedRowKeys: this.selectedRowKeys,
        selectedRows: this.selectedRows, // 当前行所有数据
        onChange: this.onSelectChange,
        getCheckboxProps: record => ({
          props: {
            disabled: !record.status, 
          },
        }),
      }
    }
  },
  methods: {
    handleOk() {
        this.$emit('cancel', false, this.selectedRows)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows[0]
    },
    cancel() {
      this.loadingBtn2 = false
      this.visible2 = false
    },
    getTechnicalProgramTypeById(isInit = false) {
      const data = {
        pageNum: 1,
        pageSize: 9999999,
        param: {
          typeId: this.projectQualityTypeId
        }
      }
      getTechnicalProgramTypeById(data).then((res) => {
        this.loading2 = false
        if (res.data.list.length) {
          this.generateList(res.data.list)
          this.gData = res.data.list && res.data.list.filter((item)=>item.status);
          if (isInit) {
            this.selectedKeys = [res.data.list[0].id]
            this.selectNode = res.data.list[0]
          }
        } else {
          this.gData = []
          this.selectedKeys = []
          this.selectNode = {}
        }
        this.$refs?.table?.refresh(true)
      })
    },
    loadData(parameter) {
      if (!this.selectNode.id) {
        return Promise.resolve({
          code: '0',
          data: {
            totalSize: 0,
            list: []
          }
        })
      }
      const requestParameters = Object.assign({}, parameter, {
        param: {
          programTypeId: this.selectNode.id,
          ...this.query
        }
      })
      return getPageTechnicalProgramTypeInfo(requestParameters).then((res) => {
        if(res.data?.list?.length){  //过滤不可用的
          //res.data.list =  res.data.list.filter((item)=>item.status)
        }
        res.data.totalSize = res.data.total
        return res
      })
    },
    search(val) {
      this.query = val
      this.$refs.table.refresh(true)
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    selectTreeNode(selectedKeys, { node }) {
      this.selectedKeys = selectedKeys
      this.selectNode = { ...node.dataRef }
      this.$refs.table.refresh(true)
    },
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        node.scopedSlots = { title: 'title' }
        if (node.children) {
          this.generateList(node.children)
        }
      }
    }
  }
}
</script>

<style scoped>
.ellipsis {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.disableClisk{
    cursor:not-allowed;
    pointer-events:none;
}
</style>